<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">

  <script type="text/javascript" src="lib/vue.js"></script>
</head>

<body>
  <div id="box">
    <input type="checkbox" @change="toggleAllCheck()" v-model="allCheck" />

    <ul>
      <li v-for="data in list" :key="data.id">
        <input type="checkbox" v-model="checkgroup" :value="data" @change="handleItemChange()" />
        {{data}}
        <button @click="handleIncrease(data,-1)">del</button>
        <span><input type="number" v-model="data.number" /></span>
        <button @click="handleIncrease(data,1)">add</button>
      </li>
    </ul>

    {{ checkgroup }}

    <p>总金额计算-方法调用 {{ getSum() }}</p>
    <p>总金额计算-计算属性- {{ computedSum }}</p>
    <p>总金额计算-监听属性- {{ totalPrice }}</p>

    <p>星星有几颗- {{ stars }}</p>

  </div>

  <script>
    const vm = new Vue({
      el: "#box",
      data: {
        stars: 1,
        allCheck: false,
        list: [
          {
            name: "商品1",
            price: 10,
            number: 1,
            id: "1",
          },
          {
            name: "商品2",
            price: 20,
            number: 2,
            id: "2",
          },
          {
            name: "商品3",
            price: 30,
            number: 3,
            id: "3",
          }
        ],
        checkgroup: [],
        totalPrice: 0
      },
      methods: {
        toggleAllCheck() {
          console.log("toggleAllCheck()");
          if (this.allCheck) {
            this.checkgroup = this.list
          } else {
            this.checkgroup = []
          }
        },
        handleItemChange() {
          console.log("handleItemChange()");
          if (this.checkgroup.length === this.list.length) {
            this.allCheck = true
          } else {
            this.allCheck = false
          }
        },
        handleIncrease(data, n) {
          data.number += n
          data.number = data.number < 0 ? 0 : data.number
        },
        getSum() {
          console.log("getSum");
          return this.checkgroup.length === 0 ? 0 :
            this.checkgroup.reduce(
              (pv, cv, index) => {
                return pv + cv.price * cv.number
              }, 0
            )

        }
      },
      computed: {
        computedSum() {
          console.log("computedSum");
          let sum = 0
          this.checkgroup.forEach(
            (data, index) => {
              sum += data.price * data.number
            }
          )
          return sum
        }
      },
watch: {
  /* 常规监听只适用于基本数据类型（引用数据类型 内部key-value发生变化 并不会引用数据类型值（地址）变化 ） */
  // checkgroup() {
  //   console.log("checkgroup的值变化了");
  //   this.totalPrice = 0
  //   this.checkgroup.forEach(
  //     (data, index) => {
  //       this.totalPrice += data.price * data.number
  //     }
  //   )
  // }

  /* 引用数据类型的正确监听方式：深度监听 */
  checkgroup: {
    /* 即使引用数据类型的地址没有发生变化(oldValue === currentValue) 也依然能监听到其内部的变化 */
    deep: true,

    /* 拿到当前值（地址） 和上一次的值（地址） */
    handler(currentValue, oldValue) {
      // console.log("currentValue=", currentValue);
      // console.log("oldValue=", oldValue);

      // 看看checkgroup的地址是否发生了变化
      console.log(oldValue === currentValue);

      console.log("checkgroup的值变化了");
      this.totalPrice = 0
      this.checkgroup.forEach(
        (data, index) => {
          this.totalPrice += data.price * data.number
        }
      )

    }
  }

}
    })
  </script>

</body>

</html>